<template>
  <span
    :class="[styles.module]"
    v-bind="{ ...attrs, ...mappingProps }"
    v-show="mappingProps.visible"
  >
    <Icon
      v-if="mappingProps.showIcon && mappingProps.icon"
      :class="[mappingProps.icon]"
      :name="mappingProps.icon"
    />

    {{
      (mappingProps.valueType === 'expression'
        ? mappingProps.labelValue
        : mappingProps.constValue) ?? mappingProps.label
    }}
  </span>
</template>

<script>
  import Icon from '@teld/q-components/Icon';
  import useMappingProps from 't/common/hooks/useMappingProps';
  import {
    commonProps,
    createNameSpace,
  } from 't/common/utils';
  import { defineComponent, watch } from 'vue';
  import styles from './index.module.scss';
  import './index.scss';

  export default defineComponent({
    name: createNameSpace('label'),
    props: {
      ...commonProps,
      icon: String,
      showIcon: Boolean,
      label: {
        type: String,
        default() {
          return '文本';
        },
      },
      valueType: {
        type: String,
        default() {
          return 'static';
        },
      },
      constValue: String,
      labelValue: String,
    },
    components: { Icon },
    emits: ['data-changed'],
    setup(props, { attrs, emit, expose, slots }) {
      const [mappingProps, mappingExpose] = useMappingProps(props);

      expose(mappingExpose);

      watch(
        () => {
          return [mappingProps.labelValue, mappingProps.constValue];
        },
        (a, b) => {
          emit('data-changed');
        },
      );

      return { attrs, styles, mappingProps };
    },
  });
</script>

<style lang="scss" scoped></style>
